import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import { ref, onUnmounted } from 'vue'
import dayjs from 'dayjs'

// 懒加载函数，当元素、组件进入可视区时才请求数据，然后渲染
// 第1个参数是监听的目标元素、第2个是请求数据的函数
export const useLazyData = (apiFn) => {
  // 定义初始值接收请求获得的数据,初始必须是数据，如果不是数据渲染时则会报错
  const result = ref([])
  // 定义空值并且跟数据一起返回，方便调用者获得目标dom元素
  const target = ref(null)

  // stop()暂停监听的函数
  const { stop } = useIntersectionObserver(
    // 监听的目标元素
    target,
    // isIntersecting是否进入可视区的布尔值
    ([{ isIntersecting }], observerElement) => {
      // 进入可视区立马暂停监听，请求数据，返回数据渲染
      if (isIntersecting) {
        stop()
        apiFn().then(data => {
          result.value = data.result
        })
      }
    },
    // 内容进入可视区的门槛值，达到门槛值则请求数据
    // 配置选项，相交的比例大于0就触发
    {
      threshold: 0
    }
  )
  return { target, result }
}

// 支付倒计时函数
export const usePayTime = () => {
  // 倒计时逻辑
  const time = ref(0)
  const timeText = ref('')
  const { pause, resume } = useIntervalFn(() => {
    time.value--
    timeText.value = dayjs.unix(time.value).format('mm分ss秒')
    if (time.value <= 0) {
      pause()
    }
  }, 1000, false)
  onUnmounted(() => {
    pause()
  })

  // 开启定时器 countdown 倒计时时间
  const start = (countdown) => {
    time.value = countdown
    timeText.value = dayjs.unix(time.value).format('mm分ss秒')
    resume()
  }

  return {
    start,
    timeText
  }
}
